<template>
  <div class="container">
    <div class="warpper">
      <div class="login_box">
        <div>
          <h2>用户登录</h2>
        </div>
        <el-form
          :model="loginForm"
          class="login-form"
          ref="loginRef"
          :rules="loginRule"
        >
          <el-form-item prop="phone">
            <el-input
              v-model="loginForm.phone"
              prefix-icon="el-icon-user"
              placeholder="请输入手机号"
              size="small"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              size="small"
              v-model="loginForm.password"
              prefix-icon="el-icon-lock"
              placeholder="请输入密码"
              type="password"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="small"
              class="login-form-button"
              @click="login"
              :loading="loading"
              >登 录</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              class="login-form-button"
              @click="goRegister"
              :disabled="loading"
              >注 册</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { reactive, toRefs, ref, unref } from "@vue/reactivity";
import { useRouter } from "vue-router";
import { UserService } from "@/api/user";
import { ElMessage } from "element-plus";

export default {
  name: "Login",
  setup() {
    const router = useRouter();
    const loginRef = ref();
    let state = reactive({
      loginForm: {
        phone: "admin",
        password: "123456",
        affirmPassword: "",
      },
      loading: false,
      checked: true,
      loginRule: {
        phone: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      login() {
        const activeRefq = unref(loginRef);
        if (!activeRefq) return;
        activeRefq.validate((valid: Boolean) => {
          if (valid) {
            state.loading = true;
            UserService.login(
              state.loginForm.phone,
              state.loginForm.password
            ).then((res) => {
              // console.log(res);

              const { status, data } = res;
              if (status == 200 && data.code === 0) {
                router.push({ name: "AdminHome" });
                localStorage.setItem("token", res.data.data);
              }
              state.loading = false;
            });
          }
        });
      },
      goRegister() {
        router.push({ name: "Register" });
      },
    });
    return {
      ...toRefs(state),
      loginRef,
    };
  },
};
</script>

<style lang="less" scoped>
.container {
  background-image: url("./loginbg.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  .title {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
  }
  h2 {
    margin-top: 0;
    margin-bottom: 0.5em;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
  }
  .login_box {
    width: 300px;
    padding: 20px;
    margin-top: 20px;
    border: 1px solid #eee;
    background-color: #fff;
  }
  .login-form-button {
    width: 100%;
  }
  .el-form-item {
    margin-bottom: 15px;
  }
}
</style>